<template>
    <div>
        <Header></Header>
        <div class="main mar-20">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">招聘信息</a></el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!--焦点区-->
        <div class="main mar-20">
            <el-row>
                <el-col :span="24">
                    <el-card style="min-height: 1200px;overflow:visible;">
                        <div slot="header" class="clearfix">
                            <span>职位搜索</span>
                        </div>
                      <r-query-form :form="form" :items="items" @search="search"></r-query-form>
                        <ul class="post-list">
                            <li v-for="(item,index) in posts" :key="index">
                              <router-link target="_blank" :to="`/post_info/${item.id}`" >{{item.name}}</router-link>
                              <span style="float: right">
                                  <el-button type="primary" @click="send(item.id,item.companyId)" size="mini" round>申请职位</el-button>
                                  <el-button type="danger"  @click="favor(item.id,item.companyId)"  size="mini" round>收藏</el-button>
                              </span>
                                <p>
                                    <span>{{item.salary}}</span>
                                    <span>{{item.type}}</span>
                                    <span>{{item.education}}</span>
                                    <span>{{item.size}}</span>
                                  <span><router-link target="_blank" :to="`/com_info/${item.companyId}`" >{{item.companyName}}</router-link></span>
                                </p>
                            </li>
                        </ul>
                        <el-pagination
                                background
                                layout="prev, pager, next,total"
                                @current-change="handleCurrentChange"
                                :total="total">
                        </el-pagination>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    <Footer></Footer>

    </div>

</template>

<script>
    import '../assets/css/styles.css'
    import Header from "./Header";
    import Footer from "./Footer";
    import {post_query} from "@/api/front";
    import {send_create} from "@/api/send";
    import {favor_create} from "@/api/favor";
    import local from "@/store/local";
    import {message} from "@/utils/message";
    import RQueryForm from "@/components/RQueryForm";
    import {dict_query} from "@/api/front";

    export default {
        name: "Index",
        components: {Footer, Header,RQueryForm},
        data(){
            return {
                posts:[],
                total:0,
                form:{
                  name:'',
                  salary:'',
                  education:'',
                  company:'',
                  type:'',
                  size:'',
                },
                items:[
                  {type:'text',label:'职位',name:'name',placeholder:'职位关键字搜索'},
                  {type:'text',label:'公司',name:'company',placeholder:'公司名称'},
                  {type:'select',label:'范围',name:'salary',placeholder:'薪资范围',options:[]},
                  {type:'select',label:'学历',name:'education',placeholder:'学历',options:[]},
                  {type:'select',label:'类型',name:'type',placeholder:'公司类型',options:[]},
                  {type:'select',label:'规模',name:'size',placeholder:'规模',options:[]},
                ],
            }
        },
        mounted() {
            this.getPostList({});
            this.getDictList(2,"education");
            this.getDictList(4,"type");
            this.getDictList(3,"salary");
            this.getDictList(5,"size");

        },
        methods:{
          getDictList(typeId,name){
            dict_query({typeId:typeId}).then(res=>{
              let arr = [];
              res.data.forEach(item=>{
                let p = {value:item.dictKey,label:item.dictVal};
                arr.push(p);
              });
              this.items.forEach(item=>{
                if(item.type=='select' && item.name == name){
                  item.options= arr;
                }
              })
            })
          },

            handleCurrentChange(page){
              let param =  this.form;
              param.page = page;
              this.getPostList(param);
            },
            search(){
              let param = this.form;
              this.getPostList(param);
            },
            getPostList(param){
                post_query(param).then(res=>{
                    this.posts = res.data;
                    this.total = res.total;
                    console.log(this.posts)
                });
            },
            send(postId,companyId){
                if(local.getToken()){
                    if(local.getUserInfo().type == 2){
                        //执行申请
                        send_create({postId:postId,companyId:companyId}).then(res=>{
                            message.success(res.msg);
                        })
                    }else{
                        message.error("非学生登录不能申请");
                    }
                }else{
                    message.error("请先登录");
                }
            },
            favor(postId,companyId){
                if(local.getToken()){
                    if(local.getUserInfo().type == 2){
                        //执行申请
                        favor_create({postId:postId,companyId:companyId}).then(res=>{
                            message.success(res.msg);
                        })
                    }else{
                        message.error("非学生登录不能收藏");
                    }
                }else{
                    message.error("请先登录");
                }
            }

        }
    }
</script>

<style scoped>

</style>